<extend name="Public:base" />

<block name="title">买买网，快来买啊！</block>

<block name="body">
    <include file="Public:nav" />
    <include file="Public:search" />
    <header class="container">
        <div class="row" id="category-panel">
            <!-- 全部分类 -->
            <div class="col-md-3">
                <div class="panel panel-default">
                  <div class="panel-heading">全部分类</div>
                  <div class="list-group">
                    <for start="0" end="9">
                    <a href="#" class="list-group-item category-item"> Cras justo odio </a>
                    </for>
                    </div>
                </div>
            </div>
            <!-- 轮播 -->
            <div class="col-md-7 thumbnail">
                <div id="carousel-generic" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-generic" data-slide-to="1" class=""></li>
                        <li data-target="#carousel-generic" data-slide-to="2" class=""></li>
                        <li data-target="#carousel-generic" data-slide-to="3" class=""></li>
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide [1140x500]" src="__PUBLIC__/img/carousel/0.jpg" data-holder-rendered="true">
                        </div>
                        <div class="item">
                            <img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide [1140x500]" src="__PUBLIC__/img/carousel/1.jpg" data-holder-rendered="true">
                        </div>
                        <div class="item">
                            <img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide [1140x500]" src="__PUBLIC__/img/carousel/2.jpg" data-holder-rendered="true">
                        </div>
                        <div class="item">
                            <img data-src="holder.js/1140x500/auto/#777:#555/text:First slide" alt="First slide [1140x500]" src="__PUBLIC__/img/carousel/3.jpg" data-holder-rendered="true">
                        </div>
                    </div>
                    <a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a>
                    <a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a>
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>
    </header>
    <!-- 列举产品 -->
    <section class="container">
        <for start="0" end="3" name="i">
        <div class="row">
            <for start="0" end="3" name="ii">
            <div class="col-md-4">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <a href=""><h3 class="panel-title">xxx类</h3></a>
                  </div>
                  <div class="panel-body">
                    <for start="0" end="4" name="iii">
                        <div class="col-md-6  col-xs-6">
                            <a href="#" class="thumbnail">
                              <img src="__IMG__/default_item.jpg" data-src="holder.js/100%x180" alt="...">
                              <h5>老鼠药</h5>
                              <strong class="text-danger">￥{$j*$i*100}</strong>
                            </a>
                        </div>
                    </for>
                  </div>
                </div>
            </div>
            </for>
        </div>
        </for>
    </section>
    <include file="Public:footer" />
</block>

<block name="css">
    <style>
    #category-panel, section, footer {
        margin-bottom: 30px;
    }
    
    #header-one-search, #xxx-panels {
        padding-top: 15px;
    }
    
    /* 其他登陆方式图标 */
    .icon-link {
        display: inline-block;
        width: 24px;
        height: 24px;
        overflow: hidden;
    }
    
    .icon-link img {
        vertical-align: middle;
    }
    </style>
</block>

<block name="js">
    <script>
    window.onload = function() {
        // 首页推荐(轮播)栏
        $('#recommend-tabs a').hover(function (e) {
            e.preventDefault()
            $(this).tab('show')
        });
        
    }

    // 全局变量
    var g = {
        "signInUrl":    "{:U('Api/User/postHandleSignIn')}"
    };
    </script>
    <!--<script type="text/javascript" src="__PUBLIC__/js/Index/nav.js" />-->
</block>
